<template>
    <basic-layout>
        <!-- 背景图 -->
        <div class="banner">
            <div class="banner-text">
                <h1>欢迎注册, CJLGB 云平台账号!</h1>
                <p>准备开启您的云计算之旅</p>
            </div>
        </div>
        <!-- 表单 -->
        <div class="form-wrapper">
            <p style="margin-bottom: 20px;">
                <span>已有账号？直接去</span>
                <router-link :to="{ name : 'login' }">登录</router-link>
            </p>
            <!-- 表单 -->
            <a-form :form="form" @submit="handleSubmit">
                <a-form-item>
                    <a-input placeholder="请输入用户名" autocomplete="off" type="text"
                             v-decorator="[
                                'username',
                                { rules: [
                                    { required: true, message: '请输入用户名' },
                                    { pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9]{3,18}$/, message: '由3~18个字母、数字、中文和下划线组成' },
                                ] }
                             ]"
                    >
                        <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                    </a-input>
                </a-form-item>
                <a-form-item>
                    <a-input-password placeholder="请输入登录密码" autocomplete="off" type="password"
                              v-decorator="[
                                    'password',
                                    { rules: [
                                        { required: true, message: '请输入登录密码' },
                                        { pattern: /^[a-zA-Z]\w{5,17}$/, message: '以字母开头,长度在6~18之间,只能包含字母、数字和下划线' }
                                    ] }
                             ]"
                    >
                        <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                    </a-input-password>
                </a-form-item>
                <a-form-item>
                    <a-input placeholder="请输入手机号码" autocomplete="off" type="text"
                             v-decorator="[
                                'userMobile',
                                { rules: [
                                    { required: true, message: '请输入手机号码' },
                                    { pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,message: '请输入正确的手机号码' }
                                ] }
                             ]"
                    >
                        <a-icon slot="prefix" type="mobile" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                    </a-input>
                </a-form-item>
                <a-form-item>
                    <a-input-search placeholder="请输入验证码" autocomplete="off" type="text" @search="sendSmsCode"
                                v-decorator="[
                                    'code',
                                    { rules: [
                                        { required: true, message: '请输入验证码' },
                                        { pattern: /^[0-9]{6}$/, message: '请输入正确的验证码' }
                                    ] }
                                 ]"
                    >
                        <a-icon slot="prefix" type="safety" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                        <a-button slot="enterButton" :disabled="pushSmsBtnState" type="primary">{{ pushSmsBtnText }}</a-button>
                    </a-input-search>
                </a-form-item>
                <!-- 协议 -->
                <a-form-item>
                    <a-checkbox v-decorator="[ 'allow',{ valuePropName: 'checked',rules :[ { required : true, message : '请先同意服务条款' } ] }]">
                        <span>创建吃惊账号的同时,我阅读并同意遵守</span>
                        <a href="javascript:void(0);">《吃惊云平台服务协议》</a>
                    </a-checkbox>
                </a-form-item>
                <a-button size="large" type="primary" html-type="submit" block>同意协议并注册</a-button>
            </a-form>
        </div>
    </basic-layout>
</template>

<script>
    import { register } from '../apis/index';
    import BasicLayout from '../components/layouts/BasicLayout';
    export default {
        components : { BasicLayout },
        data() {
            return {
                form : this.$form.createForm(this),
                //  获取验证码按钮文本
                pushSmsBtnText : '获取验证码',
                //  获取验证码按钮状态：{ true：禁用,false：可用 }
                pushSmsBtnState : false,
            };
        },
        props : {
            callback : { type : String, required : true }
        },
        methods : {
            //  发送验证码
            sendSmsCode(){
                let $this = this;
                //    校验手机号码为必填
                this.form.validateFields(["userMobile"], (err, params) => {
                    if (!err) {
                        $this.$modal.success({
                            title : '短信接口暂未接入' ,
                            content : '手机号码[' + params['userMobile'] + '],验证码随便填6个数字,例如:123456',
                            onOk : () => {
                                let pointer = 120;
                                $this.pushSmsBtnText = pointer + '秒后重新获取';
                                $this.pushSmsBtnState = true;
                                let interval = setInterval(() => {
                                    --pointer;
                                    if (pointer === 0){
                                        //  结束计时器
                                        clearInterval(interval);
                                        $this.pushSmsBtnText = '获取验证码';
                                        $this.pushSmsBtnState = false;
                                        return;
                                    }
                                    $this.pushSmsBtnText = pointer + '秒后重新获取';
                                },1000);
                            }
                        });
                    }
                });
            },
            //  提交表单
            handleSubmit(e){
                e.preventDefault();
                let $this = this;
                //  表单参数校验
                $this.form.validateFields((err, params) => {
                    if (!err) {
                        register(params).then(() => {
                            $this.$modal.success({
                                title : '注册成功',
                                content : '前往登录',
                                onOk : () => $this.$router.push({ path : $this.callback })
                            });
                        });
                    }
                });
            }
        }
    }
</script>
<style scoped>
    .banner{
        height: 400px;
        min-width: 1000px;
        position: relative;
        background: rgb(35,80,225) center center no-repeat url(//cjlgb-design-oauth.cdn.bcebos.com/images%2Fbanner-1594050431445.jpg);
        background-position-y: 0;
        z-index: -1;
    }
    .banner-text{
        width: 100%;
        position: absolute;
        top: 35%;
        text-align: center;
        color: white;
    }
    .banner-text h1{
        color: white;
        font-size: 28px;
    }
    .form-wrapper{
        width: 700px;
        margin: -150px auto 0;
        background: #fff;
        box-shadow: 0 4px 5px 0 rgba(0,0,0,0.09);
        padding: 50px;
    }
</style>
